<template>
  <div class="log">
    <avue-table
      style="height: 100%"
      :dataList="dataList"
      :page="page"
      :loading="loading"
      :tableColumns="tableColumns"
      @onPageChange="onPageChange">
    </avue-table>
  </div>
</template>

<script>
import { queryAccountLog } from '@/api/order'
export default {
  data() {
    return {
      loading: false,
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 30,
        pageSizes: [30, 50, 100],
      },
      dataList: [],
      tableColumns: [
        {
          width: '80px',
          prop: 'id',
          label: '账号',
        },
        {
          width: '140px',
          label: '功能',
          prop: 'op_type_name',
        },
        {
          overHidden: true,
          align: 'left',
          label: '操作详情',
          prop: 'op_description',
        },
        {
          width: '140px',
          label: '时间',
          prop: 'create_at',
          formatter: row => this.$formatTime(row?.create_at),
        },
      ],
    }
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },
  },
  watch: {
    value: {
      handler(newVal) {
        this.handelAccountLog(newVal)
      },
    },
  },
  methods: {
    onPageChange(pageObj) {
      Object.assign(this.page, pageObj)
      this.handelAccountLog(this.value)
    },
    async handelAccountLog(row) {
      this.dataList = []
      const parms = {
        user_device_id: row,
        page: this.page.currentPage,
        page_size: this.page.pageSize,
      }
      const { data } = await queryAccountLog(parms)
      this.dataList = data?.list ?? []
      this.page.total = data?.total ?? []

      this.loading = false
    },
  },
}
</script>

<style lang="scss" scoped>
.log {
  height: 500px;
}
</style>
